<template>
  <div style="width: 99%;  margin: auto;">
    <el-row style="margin-top: 40px;">
      <el-col :span="16">
        <h3>对外交流合作项目(含分支、代表机构开展的合作项目)</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;margin-top: 13px;">
        <el-button style="width: 100px;"  size="default" type="primary" @click="addForeignList()">新增</el-button>
      </el-col>
    </el-row>
    <el-form :model="foreignList" ref="foreignList">
    <el-row>
      <el-col :span="24">
        <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="foreignList" border>
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="projectName" label="项目名称" align="center">
            <template #default="scope">
<!--              :rules="foreignRules.projectName"-->
              <el-form-item :prop="'[' + scope.$index + '].projectName'" >
              <el-input v-model="scope.row.projectName" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="projectExpenditure" label="项目支出(人民币万元)" align="center">
            <template #default="scope">
<!--              :rules="foreignRules.projectExpenditure"-->
              <el-form-item :prop="'[' + scope.$index + '].projectExpenditure'" >
              <el-input type="number" v-model="scope.row.projectExpenditure" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="institutionCountry" label="实施国家(地区)" align="center">
            <template #default="scope">
<!--              :rules="foreignRules.institutionCountry"-->
              <el-form-item :prop="'[' + scope.$index + '].institutionCountry'" >
              <el-select clearable filterable  v-model="scope.row.institutionCountry" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in countryOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="achievementProblem" label="活动主要成绩、问题和管理政策建议" align="center">
            <template #default="scope">
<!--              :rules="foreignRules.achievementProblem"-->
              <el-form-item :prop="'[' + scope.$index + '].achievementProblem'" >
              <el-input v-model="scope.row.achievementProblem" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
            <template #default="scope">
              <el-button type="text"  size="default" @click="foreignDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-form>
    <p style="margin-top: 10px;">注：项目不包括会议、考察、访问等非项目性的一次性活动。</p>
    <el-row style="margin-top: 40px;">
      <el-col :span="16">
        <h3>参加国际组织（含分支、代表机构参加的境外组织）</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;margin-top: 13px;">
        <el-button style="margin-left: 20px;width: 100px;"  size="default"  type="primary" @click="addInternationalList()">新增</el-button>
      </el-col>
    </el-row>
    <el-form :model="internationalList" ref="internationalList">
    <el-row>
      <el-col :span="24">
        <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="internationalList" border>
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="organizationName" label="国际组织名称" align="center">
            <template #default="scope">
<!--              :rules="internationalRules.organizationName"-->
              <el-form-item :prop="'[' + scope.$index + '].organizationName'" >
              <el-input v-model="scope.row.organizationName" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="organizationType" label="国际组织类型" align="center">
            <template #default="scope">
<!--              :rules="internationalRules.organizationType"-->
              <el-form-item :prop="'[' + scope.$index + '].organizationType'" >
              <el-select clearable  v-model="scope.row.organizationType" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in internationalOrgOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="participateTime" label="参加时间" align="center">
            <template #default="scope">
<!--              :rules="internationalRules.participateTime"-->
              <el-form-item :prop="'[' + scope.$index + '].participateTime'" >
              <el-date-picker
                v-model="scope.row.participateTime"
                type="date"
                style="width: 100%;"
                value-format="YYYY-MM-DD"
                placeholder="参加时间">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="qualification" label="担任职务或获得资格情况" align="center">
            <template #default="scope">
<!--              :rules="internationalRules.qualification"-->
              <el-form-item :prop="'[' + scope.$index + '].qualification'" >
              <el-input v-model="scope.row.qualification" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
            <template #default="scope">
              <el-button type="text"  size="default" @click="internationalDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-form>
    <p style="margin-top: 10px;">注：</p>
    <p>1、本栏目统计本单位截止{{year}}年底仍然有效参加的所有国际组织。</p>
    <p>
      2、职务或资格类型包括：会员、担任国际组织分支机构具体职务、担任国际组织具体职务、获得国际组织某种资格或认可（如谘商地位、建立正式官方关系）等。</p>
    <el-dialog title="新增对外交流合作项目(含分支、代表机构开展的合作项目)" v-model="foreignDialog">
      <el-form  size="default" :model="postForeign" ref="postForeign" label-width="160px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="postForeign.projectName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="项目支出" prop="projectExpenditure">
              <el-input type="number" v-model="postForeign.projectExpenditure" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="所在国家（地区）" prop="institutionCountry">
              <el-select clearable  v-model="postForeign.institutionCountry" filterable placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in countryOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="活动主要成绩、问题和管理政策建议" prop="achievementProblem">
              <el-input type="textarea" v-model="postForeign.achievementProblem" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="foreignDialog = false">取 消</el-button>
        <el-button type="primary" @click="addForeignList()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增参加国际组织（含分支、代表机构参加的境外组织）" v-model="internationalDialog">
      <el-form  size="default" :model="postInternational" ref="postInternational" label-width="160px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item label="国际组织名称" prop="organizationName">
              <el-input v-model="postInternational.organizationName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="国际组织类型" prop="organizationType">
              <el-select clearable  v-model="postInternational.organizationType" filterable placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in internationalOrgOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="参加时间" prop="participateTime">
              <el-date-picker
                value-format="YYYY-MM-DD"
                style="width: 100%;"
                v-model="postInternational.participateTime"
                type="date"
                placeholder="参加时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="担任职务或获得资格情况" prop="qualification">
              <el-input type="textarea" v-model="postInternational.qualification" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="internationalDialog = false">取 消</el-button>
        <el-button type="primary" @click="addInternationalList()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {getDictByCode, getTableInfoByPage, mfSaveForeign, mfSaveInternational} from "@/views/yearCheck/ykb/mf/mf";

export default {
  data() {
    return {
      year:undefined,
      internationalDialog: false,
      foreignDialog: false,
      internationalChecked: false,
      foreignChecked: false,
      //国际组织
      internationalList: [],
      //对外交流合作
      foreignList: [],
      postInternational: {
        id:'',
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear: localStorage.getItem("examineYear"),//审查年度
        organizationBaseId:'1',//组织id
        organizationName: '',//国际组织名称
        organizationType: '',//国际组织类型
        participateTime: '',//($date-time)参加时间
        qualification: '',//担任职务或获得资格情况
      },
      postForeign: {
        id:'',
        organizationBaseId:'1',//组织id
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear: localStorage.getItem("examineYear"),//审查年度
        institutionCountry: '',//实施国家
        achievementProblem: '',//活动主要成绩、问题和管理政策建议
        projectExpenditure: '',//项目支出
        projectName: '',//项目名称
      },
      foreignRules:{
        // institutionCountry:[{ required: true, message: '请选择', trigger: 'blur' }],
        // achievementProblem:[{ required: true, message: '请完善', trigger: 'blur' }],
        // projectExpenditure:[{ required: true, message: '请完善', trigger: 'blur' }],
        // projectName:[{ required: true, message: '请完善', trigger: 'blur' }],
      },
      internationalRules:{
        organizationName: [{ required: true, message: '请完善', trigger: 'blur' }],
        organizationType: [{ required: true, message: '请选择', trigger: 'blur' }],
        participateTime:[{ required: true, message: '请选择', trigger: 'blur' }],
        qualification: [{ required: true, message: '请完善', trigger: 'blur' }],
      },
      internationalOrgOptions: undefined,
      countryOptions:undefined,
    };
  },

  created() {

  },
  methods: {
    postInfo(){
      this.$refs.foreignList.validate(valid=> {
        if (valid) {
          if(this.foreignList == null || this.foreignList.length == 0){
            return;
          }
          for (let i = 0; i < this.foreignList.length; i++) {
            this.foreignList[i].creditCode = localStorage.getItem("creditCode");
            this.foreignList[i].examineYear = localStorage.getItem("examineYear");
          }
          mfSaveForeign(this.foreignList).then(response => {
            this.$message({
              message: '保存对外交流合作项目成功！',
              type: 'success'
            });
            this.getInfo();
          });
        } else {
          this.$message({
            message: '请填写完整-对外交流合作项目情况！',
            type: 'error'
          });
        }
      });
      this.$refs.internationalList.validate(valid=> {
        if (valid) {
          if(this.internationalList == null || this.internationalList.length == 0){
            return;
          }

          for (let i = 0; i < this.internationalList.length; i++) {
            this.internationalList[i].creditCode = localStorage.getItem("creditCode");
            this.internationalList[i].examineYear = localStorage.getItem("examineYear");
          }
          mfSaveInternational(this.internationalList).then(response => {
            this.$message({
              message: '保存参加国际组织情况成功！',
              type: 'success'
            });
            this.getInfo();
          });
        } else {
          this.$message({
            message: '请填写完整-参加国际组织情况！',
            type: 'error'
          });
        }
      });

    },
    addInternationalList(){
      // this.internationalDialog = false;
      this.internationalList.push(Object.assign({}, this.postInternational));
    },
    addForeignList(){
      // this.foreignDialog = false;
      this.foreignList.push(Object.assign({}, this.postForeign));
    },
    foreignDelete(index){
      this.foreignList.splice(index,1)
    },
    internationalDelete(index){
      this.internationalList.splice(index,1)
    },
    getInfo() {
      this.year = localStorage.getItem("examineYear");
      getDictByCode('country').then(response => {
        this.countryOptions = response.data;
      });
      getDictByCode('internationalOrg').then(response => {
        this.internationalOrgOptions = response.data;
      });
      getTableInfoByPage(11).then(response => {
        console.log(response.data)
        this.internationalList = response.data.internationalList;
        this.foreignList = response.data.foreignList;
        if(this.internationalList == null || this.internationalList.length == 0){
          this.internationalList = [];
        }
        if(this.foreignList == null || this.foreignList.length == 0){
          this.foreignList = [];
        }
      });
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
